<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>会员中心-众包服务平台</title>
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/font-awesome.min.css">
</head>
<body>
  <!-- 导航栏 -->
  <header class="header">
    <div class="container">
      <nav class="nav">
        <a href="index.html" class="logo">众包<span>服务</span></a>
        <div class="nav-menu">
          <a href="index.html">首页</a>
          <a href="services.html">服务展示</a>
          <a href="index.html#projects">重点推荐</a>
          <a href="#footer">关于我们</a>
          <a href="member-center.html" class="active">会员中心</a>
        </div>
        <div class="nav-btn">
          <div class="user-info">
            <i class="fa fa-user-circle"></i>
            <span class="username">用户12345</span>
          </div>
          <div class="mobile-menu-btn">
            <i class="fa fa-bars"></i>
          </div>
        </div>
      </nav>
    </div>
  </header>

  <!-- 会员中心区域 -->
  <section class="member-center">
    <div class="container">
      <div class="member-wrapper">
        <!-- 侧边栏导航 -->
        <div class="member-sidebar">
          <div class="sidebar-title">个人中心</div>
          <ul class="sidebar-menu">
            <li class="has-children active">
              <a href="#my-orders" class="parent-link">
                <i class="fa fa-list-alt"></i>
                <span>我的订单</span>
                <i class="fa fa-angle-down"></i>
              </a>
              <ul class="submenu active">
                <li><a href="#all-orders" class="active">所有订单</a></li>
                <li><a href="#pending-orders">待处理</a></li>
                <li><a href="#completed-orders">已完成</a></li>
                <li><a href="#cancelled-orders">已取消</a></li>
              </ul>
            </li>
            <li class="has-children">
              <a href="#my-account" class="parent-link">
                <i class="fa fa-user"></i>
                <span>我的账户</span>
                <i class="fa fa-angle-down"></i>
              </a>
              <ul class="submenu">
                <li><a href="#recharge">账户充值</a></li>
                <li><a href="#consumption">消费记录</a></li>
                <li><a href="#profile">我的资料</a></li>
              </ul>
            </li>
          </ul>
        </div>

        <!-- 主内容区域 -->
        <div class="member-content">
          <!-- 我的订单 -->
          <div class="content-section active" id="all-orders">
            <div class="section-header">
              <h2 class="content-title">所有订单</h2>
              <div class="order-filters">
                <div class="search-box order-search">
                  <input type="text" class="search-input" placeholder="搜索订单号或服务名称">
                  <button class="btn btn-primary search-btn">搜索</button>
                </div>
                <div class="filter-options">
                  <button class="btn btn-outline filter-btn active">全部</button>
                  <button class="btn btn-outline filter-btn">待处理</button>
                  <button class="btn btn-outline filter-btn">已完成</button>
                  <button class="btn btn-outline filter-btn">已取消</button>
                </div>
              </div>
            </div>

            <div class="order-list">
              <!-- 订单1 -->
              <div class="order-item">
                <div class="order-header">
                  <div class="order-info">
                    <span class="order-number">订单号: 20240615001</span>
                    <span class="order-date">2024-06-15 14:30</span>
                  </div>
                  <div class="order-status completed">已完成</div>
                </div>
                <div class="order-body">
                  <div class="order-product">
                    <img src="https://picsum.photos/id/239/80/80" alt="XHS-高速点赞" class="product-img">
                    <div class="product-info">
                      <div class="product-name">XHS-高速点赞 (时速1000)</div>
                      <div class="product-params">链接: https://www.xiaohongshu.com/xxx</div>
                    </div>
                  </div>
                  <div class="order-summary">
                    <div class="order-quantity">数量: 100</div>
                    <div class="order-price">¥30.45</div>
                    <div class="order-actions">
                      <button class="btn btn-outline view-details">查看详情</button>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 订单2 -->
              <div class="order-item">
                <div class="order-header">
                  <div class="order-info">
                    <span class="order-number">订单号: 20240612008</span>
                    <span class="order-date">2024-06-12 09:15</span>
                  </div>
                  <div class="order-status pending">处理中</div>
                </div>
                <div class="order-body">
                  <div class="order-product">
                    <img src="https://picsum.photos/id/240/80/80" alt="抖音视频代运营" class="product-img">
                    <div class="product-info">
                      <div class="product-name">抖音视频代运营</div>
                      <div class="product-params">周期: 1个月</div>
                    </div>
                  </div>
                  <div class="order-summary">
                    <div class="order-quantity">数量: 1</div>
                    <div class="order-price">¥3,500.00</div>
                    <div class="order-actions">
                      <button class="btn btn-outline view-details">查看详情</button>
                      <button class="btn btn-primary cancel-order">取消订单</button>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 订单3 -->
              <div class="order-item">
                <div class="order-header">
                  <div class="order-info">
                    <span class="order-number">订单号: 20240610015</span>
                    <span class="order-date">2024-06-10 16:45</span>
                  </div>
                  <div class="order-status cancelled">已取消</div>
                </div>
                <div class="order-body">
                  <div class="order-product">
                    <img src="https://picsum.photos/id/241/80/80" alt="小红书文案撰写" class="product-img">
                    <div class="product-info">
                      <div class="product-name">小红书文案撰写</div>
                      <div class="product-params">数量: 5篇</div>
                    </div>
                  </div>
                  <div class="order-summary">
                    <div class="order-quantity">数量: 5</div>
                    <div class="order-price">¥750.00</div>
                    <div class="order-actions">
                      <button class="btn btn-outline view-details">查看详情</button>
                      <button class="btn btn-primary reorder">重新下单</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="pagination">
              <button class="btn btn-outline prev-page">上一页</button>
              <button class="btn btn-primary current-page">1</button>
              <button class="btn btn-outline">2</button>
              <button class="btn btn-outline">3</button>
              <span>...</span>
              <button class="btn btn-outline">8</button>
              <button class="btn btn-outline next-page">下一页</button>
            </div>
          </div>

          <!-- 待处理订单 -->
          <div class="content-section" id="pending-orders">
            <div class="section-header">
              <h2 class="content-title">待处理订单</h2>
              <div class="order-filters">
                <div class="search-box order-search">
                  <input type="text" class="search-input" placeholder="搜索订单号或服务名称">
                  <button class="btn btn-primary search-btn">搜索</button>
                </div>
                <div class="filter-options">
                  <button class="btn btn-outline filter-btn active">全部</button>
                  <button class="btn btn-outline filter-btn">待支付</button>
                  <button class="btn btn-outline filter-btn">处理中</button>
                  <button class="btn btn-outline filter-btn">待确认</button>
                </div>
              </div>
            </div>

            <div class="order-list">
              <!-- 待处理订单1 - 待支付 -->
              <div class="order-item">
                <div class="order-header">
                  <div class="order-info">
                    <span class="order-number">订单号: 20240620003</span>
                    <span class="order-date">2024-06-20 10:25</span>
                  </div>
                  <div class="order-status pending payment">待支付</div>
                </div>
                <div class="order-body">
                  <div class="order-product">
                    <img src="https://picsum.photos/id/242/80/80" alt="微博粉丝增长" class="product-img">
                    <div class="product-info">
                      <div class="product-name">微博粉丝增长 (自然增长)</div>
                      <div class="product-params">目标: 5000粉丝 | 周期: 30天</div>
                    </div>
                  </div>
                  <div class="order-summary">
                    <div class="order-quantity">数量: 1</div>
                    <div class="order-price">¥1,280.00</div>
                    <div class="order-actions">
                      <button class="btn btn-outline view-details">查看详情</button>
                      <button class="btn btn-primary pay-order">立即支付</button>
                      <button class="btn btn-danger cancel-order">取消订单</button>
                    </div>
                  </div>
                </div>
                <div class="order-timer">
                  <span class="timer-text">剩余支付时间:</span>
                  <span class="countdown" data-time="172800">02:00:00</span>
                  <span class="timer-note">超时订单将自动取消</span>
                </div>
              </div>

              <!-- 待处理订单2 - 处理中 -->
              <div class="order-item">
                <div class="order-header">
                  <div class="order-info">
                    <span class="order-number">订单号: 20240619015</span>
                    <span class="order-date">2024-06-19 16:40</span>
                  </div>
                  <div class="order-status pending processing">处理中</div>
                </div>
                <div class="order-body">
                  <div class="order-product">
                    <img src="https://picsum.photos/id/243/80/80" alt="抖音视频剪辑" class="product-img">
                    <div class="product-info">
                      <div class="product-name">抖音视频剪辑 (专业版)</div>
                      <div class="product-params">数量: 10条 | 交付方式: 网盘</div>
                    </div>
                  </div>
                  <div class="order-summary">
                    <div class="order-quantity">数量: 10</div>
                    <div class="order-price">¥2,500.00</div>
                    <div class="order-actions">
                      <button class="btn btn-outline view-details">查看详情</button>
                      <button class="btn btn-outline contact-service">联系客服</button>
                    </div>
                  </div>
                </div>
                <div class="order-progress">
                  <div class="progress-bar">
                    <div class="progress-fill" style="width: 60%"></div>
                  </div>
                  <div class="progress-steps">
                    <span class="step completed">已付款</span>
                    <span class="step completed">处理中</span>
                    <span class="step current">制作中</span>
                    <span class="step">待确认</span>
                    <span class="step">已完成</span>
                  </div>
                </div>
              </div>
            </div>

            <div class="pagination">
              <button class="btn btn-outline prev-page">上一页</button>
              <button class="btn btn-primary current-page">1</button>
              <button class="btn btn-outline">2</button>
              <button class="btn btn-outline next-page">下一页</button>
            </div>
          </div>

          <!-- 已完成订单 -->
          <div class="content-section" id="completed-orders">
            <div class="section-header">
              <h2 class="content-title">已完成订单</h2>
              <div class="order-filters">
                <div class="search-box order-search">
                  <input type="text" class="search-input" placeholder="搜索订单号或服务名称">
                  <button class="btn btn-primary search-btn">搜索</button>
                </div>
              </div>
            </div>

            <div class="order-list">
              <!-- 已完成订单1 -->
              <div class="order-item">
                <div class="order-header">
                  <div class="order-info">
                    <span class="order-number">订单号: 20240615001</span>
                    <span class="order-date">2024-06-15 14:30</span>
                  </div>
                  <div class="order-status completed">已完成</div>
                </div>
                <div class="order-body">
                  <div class="order-product">
                    <img src="https://picsum.photos/id/239/80/80" alt="XHS-高速点赞" class="product-img">
                    <div class="product-info">
                      <div class="product-name">XHS-高速点赞 (时速1000)</div>
                      <div class="product-params">链接: https://www.xiaohongshu.com/xxx</div>
                    </div>
                  </div>
                  <div class="order-summary">
                    <div class="order-quantity">数量: 100</div>
                    <div class="order-price">¥30.45</div>
                    <div class="order-actions">
                      <button class="btn btn-outline view-details">查看详情</button>
                      <button class="btn btn-primary reorder">再次购买</button>
                    </div>
                  </div>
                </div>
                <div class="order-notice">
                  <i class="fa fa-check-circle"></i>
                  <span>服务已完成，满意度评价：</span>
                  <div class="rating">
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                  </div>
                </div>
              </div>
            </div>

            <div class="pagination">
              <button class="btn btn-outline prev-page">上一页</button>
              <button class="btn btn-primary current-page">1</button>
              <button class="btn btn-outline">2</button>
              <button class="btn btn-outline next-page">下一页</button>
            </div>
          </div>

          <!-- 已取消订单 -->
          <div class="content-section" id="cancelled-orders">
            <div class="section-header">
              <h2 class="content-title">已取消订单</h2>
              <div class="order-filters">
                <div class="search-box order-search">
                  <input type="text" class="search-input" placeholder="搜索订单号或服务名称">
                  <button class="btn btn-primary search-btn">搜索</button>
                </div>
              </div>
            </div>

            <div class="order-list">
              <!-- 已取消订单1 -->
              <div class="order-item">
                <div class="order-header">
                  <div class="order-info">
                    <span class="order-number">订单号: 20240610015</span>
                    <span class="order-date">2024-06-10 16:45</span>
                  </div>
                  <div class="order-status cancelled">已取消</div>
                </div>
                <div class="order-body">
                  <div class="order-product">
                    <img src="https://picsum.photos/id/241/80/80" alt="小红书文案撰写" class="product-img">
                    <div class="product-info">
                      <div class="product-name">小红书文案撰写</div>
                      <div class="product-params">数量: 5篇</div>
                    </div>
                  </div>
                  <div class="order-summary">
                    <div class="order-quantity">数量: 5</div>
                    <div class="order-price">¥750.00</div>
                    <div class="order-actions">
                      <button class="btn btn-outline view-details">查看详情</button>
                      <button class="btn btn-primary reorder">重新下单</button>
                    </div>
                  </div>
                </div>
                <div class="order-notice">
                  <i class="fa fa-info-circle"></i>
                  <span>取消原因：用户主动取消 | 退款状态：已退款至账户余额</span>
                </div>
              </div>
            </div>

            <div class="pagination">
              <button class="btn btn-outline prev-page">上一页</button>
              <button class="btn btn-primary current-page">1</button>
              <button class="btn btn-outline next-page">下一页</button>
            </div>
          </div>

          <!-- 账户充值 -->
          <div class="content-section" id="recharge">
            <div class="section-header">
              <h2 class="content-title">账户充值</h2>
            </div>
            <div class="recharge-container">
              <div class="balance-info">
                <span class="balance-label">当前余额:</span>
                <span class="balance-amount">¥1,250.50</span>
              </div>
              <div class="recharge-form">
                <div class="form-group">
                  <label class="form-label">充值金额</label>
                  <div class="amount-options">
                    <button type="button" class="amount-btn">¥100</button>
                    <button type="button" class="amount-btn">¥500</button>
                    <button type="button" class="amount-btn">¥1000</button>
                    <button type="button" class="amount-btn">¥2000</button>
                    <button type="button" class="amount-btn">¥5000</button>
                  </div>
                  <input type="number" class="form-input custom-amount" placeholder="其他金额">
                </div>
                <div class="form-group">
                  <label class="form-label">支付方式</label>
                  <div class="payment-methods">
                    <label class="payment-option">
                      <input type="radio" name="payment" checked>
                      <span class="payment-icon"><i class="fa fa-credit-card"></i></span>
                      <span class="payment-name">银行卡支付</span>
                    </label>
                    <label class="payment-option">
                      <input type="radio" name="payment">
                      <span class="payment-icon"><i class="fa fa-weixin"></i></span>
                      <span class="payment-name">微信支付</span>
                    </label>
                    <label class="payment-option">
                      <input type="radio" name="payment">
                      <span class="payment-icon"><i class="fa fa-cc-visa"></i></span>
                      <span class="payment-name">支付宝</span>
                    </label>
                  </div>
                </div>
                <button type="button" class="btn btn-primary recharge-btn">确认充值</button>
              </div>
            </div>
          </div>

          <!-- 消费记录 -->
          <div class="content-section" id="consumption">
            <div class="section-header">
              <h2 class="content-title">消费记录</h2>
              <div class="consumption-filters">
                <div class="search-box consumption-search">
                  <input type="text" class="search-input" placeholder="搜索记录">
                  <button class="btn btn-primary search-btn">搜索</button>
                </div>
                <select class="filter-select">
                  <option value="all">全部类型</option>
                  <option value="recharge">充值</option>
                  <option value="consume">消费</option>
                  <option value="refund">退款</option>
                </select>
              </div>
            </div>
            <div class="consumption-list">
              <div class="consumption-item">
                <div class="consumption-info">
                  <div class="consumption-type">订单消费</div>
                  <div class="consumption-date">2024-06-15 14:30</div>
                  <div class="consumption-desc">XHS-高速点赞 (时速1000) #20240615001</div>
                </div>
                <div class="consumption-amount outflow">-¥30.45</div>
              </div>
              <div class="consumption-item">
                <div class="consumption-info">
                  <div class="consumption-type">账户充值</div>
                  <div class="consumption-date">2024-06-12 09:00</div>
                  <div class="consumption-desc">微信支付充值</div>
                </div>
                <div class="consumption-amount inflow">+¥500.00</div>
              </div>
              <div class="consumption-item">
                <div class="consumption-info">
                  <div class="consumption-type">订单消费</div>
                  <div class="consumption-date">2024-06-10 16:45</div>
                  <div class="consumption-desc">小红书文案撰写 #20240610015</div>
                </div>
                <div class="consumption-amount outflow">-¥750.00</div>
              </div>
              <div class="consumption-item">
                <div class="consumption-info">
                  <div class="consumption-type">订单退款</div>
                  <div class="consumption-date">2024-06-10 17:30</div>
                  <div class="consumption-desc">小红书文案撰写 #20240610015</div>
                </div>
                <div class="consumption-amount inflow">+¥750.00</div>
              </div>
              <div class="consumption-item">
                <div class="consumption-info">
                  <div class="consumption-type">账户充值</div>
                  <div class="consumption-date">2024-06-05 11:20</div>
                  <div class="consumption-desc">支付宝充值</div>
                </div>
                <div class="consumption-amount inflow">+¥1000.00</div>
              </div>
              <div class="consumption-item">
                <div class="consumption-info">
                  <div class="consumption-type">订单消费</div>
                  <div class="consumption-date">2024-06-01 10:15</div>
                  <div class="consumption-desc">抖音视频代运营 #20240601002</div>
                </div>
                <div class="consumption-amount outflow">-¥3,500.00</div>
              </div>
            </div>
            <div class="pagination">
              <button class="btn btn-outline prev-page">上一页</button>
              <button class="btn btn-primary current-page">1</button>
              <button class="btn btn-outline">2</button>
              <button class="btn btn-outline next-page">下一页</button>
            </div>
          </div>

          <!-- 我的资料 -->
          <div class="content-section" id="profile">
            <div class="section-header">
              <h2 class="content-title">我的资料</h2>
            </div>
            <div class="profile-form">
              <!-- 头像上传 -->
              <div class="avatar-upload">
                <img src="https://picsum.photos/id/64/120/120" alt="用户头像" class="avatar-preview">
                <div>
                  <button type="button" class="btn btn-outline avatar-upload-btn">
                    <i class="fa fa-upload"></i> 更换头像
                  </button>
                  <p style="margin-top: 10px; font-size: 12px; color: #666;">
                    支持JPG、PNG格式，建议尺寸200x200px
                  </p>
                  <input type="file" id="avatar-input" style="display: none;" accept="image/*">
                </div>
              </div>

              <!-- 基本信息 -->
              <div class="form-group">
                <label class="form-label">用户名</label>
                <input type="text" class="form-input" value="用户12345">
              </div>
              <div class="form-group">
                <label class="form-label">手机号码</label>
                <input type="tel" class="form-input" value="138****5678">
              </div>
              <div class="form-group">
                <label class="form-label">邮箱</label>
                <input type="email" class="form-input" value="user@example.com">
              </div>
              <div class="form-group">
                <label class="form-label">性别</label>
                <div class="gender-options">
                  <label class="gender-option">
                    <input type="radio" name="gender" checked> 男
                  </label>
                  <label class="gender-option">
                    <input type="radio" name="gender"> 女
                  </label>
                  <label class="gender-option">
                    <input type="radio" name="gender"> 保密
                  </label>
                </div>
              </div>
              <div class="form-group">
                <label class="form-label">简介</label>
                <textarea class="form-input" rows="4" placeholder="请输入个人简介">从事社交媒体运营多年，擅长小红书、抖音平台推广。</textarea>
              </div>

              <!-- 密码修改 -->
              <div class="password-group">
                <h3 style="margin-bottom: 20px; color: #333;">修改密码</h3>
                <div class="form-group">
                  <label class="form-label">原密码</label>
                  <input type="password" class="form-input" placeholder="请输入原密码">
                </div>
                <div class="form-group">
                  <label class="form-label">新密码</label>
                  <input type="password" class="form-input" placeholder="请输入新密码">
                </div>
                <div class="form-group">
                  <label class="form-label">确认新密码</label>
                  <input type="password" class="form-input" placeholder="请再次输入新密码">
                </div>
              </div>

              <button type="button" class="btn btn-primary save-profile">保存修改</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- 页脚 -->
  <footer class="footer" id="footer">
    <div class="container">
      <div class="footer-top">
        <div class="footer-about">
          <div class="footer-logo">众包<span>服务</span></div>
          <p class="footer-desc">连接需求与人才，打造安全、高效的服务交易平台，让每一个项目都能找到合适的解决方案。</p>
          <div style="display: flex; gap: 15px; font-size: 20px;">
            <a href="#"><i class="fa fa-weixin"></i></a>
            <a href="#"><i class="fa fa-weibo"></i></a>
            <a href="#"><i class="fa fa-qq"></i></a>
          </div>
        </div>
        <div class="footer-service">
          <h3 class="footer-title">服务分类</h3>
          <ul class="footer-list">
            <li><a href="#">设计服务</a></li>
            <li><a href="#">开发服务</a></li>
            <li><a href="#">营销推广</a></li>
            <li><a href="#">文案创作</a></li>
            <li><a href="#">视频制作</a></li>
          </ul>
        </div>
        <div class="footer-help">
          <h3 class="footer-title">帮助中心</h3>
          <ul class="footer-list">
            <li><a href="#">新手指南</a></li>
            <li><a href="#">常见问题</a></li>
            <li><a href="#">交易规则</a></li>
            <li><a href="#">隐私政策</a></li>
            <li><a href="#">联系我们</a></li>
          </ul>
        </div>
      </div>
      <div class="footer-bottom">
        © 2024 简易众包服务平台 版权所有
      </div>
    </div>
  </footer>

  <script src="js/script.js"></script>
</body>
</html>
    